<meta title="会员管理">
<div class="p">
    <div class="p-b">
        <form class="form-inline m-b-wrapper-xs" id="form" s="form"
              s-form="{action:function(){$page.node.val(1); $usersGrid.refresh()}}"
        >
            <input autocomplete="off" type="text" class="form-control input-sm" name="id" placeholder="用户ID" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="startRelationPath" placeholder="父关系" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="relationPath" placeholder="关系链" />
            <input autocomplete="off" type="text" class="form-control input-sm" name="phone" placeholder="会员手机号" />
            <div class="form-control s-select input-sm " style="width: 200px;"
                 s="select"
                 id="province"
                 s-valid-label="省份"
                 s-build="S.get('api/region/list/0')" >
                <input autocomplete="off" type="hidden" name="provinceId" class="s-select-input" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text" class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择省份</li>
                    </ul>
                </div>
            </div>
            <div class="form-control s-select input-sm" style="width: 200px;"
                 s="select"
                 id="city"
                 s-data="''"
                 s-build-switch="'off-on'"
                 s-select="{title: 'name'}"
                 s-build="S.get('api/region/list/' + ($province.val() || -1))" >
                <input autocomplete="off" type="hidden" class="s-select-input" name="cityId" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text"  class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择城市</li>
                    </ul>
                </div>
            </div>
            <div class="form-control s-select input-sm" style="width: 200px;"
                 s="select"
                 id="district"
                 s-data="''"
                 s-build-switch="'off-on'"
                 s-select="{title: 'name'}"
                 s-build="S.get('api/region/list/' + ($city.val() || -1))" >
                <input autocomplete="off" type="hidden" class="s-select-input" name="districtId" />
                <div class="s-select-mirror">
                    <span></span>
                    <i class="fa fa-caret-down"></i>
                </div>
                <div class="s-select-panel">
                    <input autocomplete="off" type="text"  class="s-select-filter">
                    <ul class="s-select-list">
                        <li class="s-select-list-item" value="">选择区县</li>
                    </ul>
                </div>
            </div>
            <select class="form-control input-sm" s="select"
                    name="level"
                    s-build="S.get('/api/enum/valuesMap/core.enums.UserLevel')">
                <option value="">会员等级</option>
            </select>
            <!--<select class="form-control input-sm"-->
                    <!--name="locked">-->
                <!--<option value="">等级有效性</option>-->
                <!--<option value="true">等级未过期</option>-->
                <!--<option value="false">等级已过期</option>-->
            <!--</select>-->
            <select class="form-control input-sm"
                    name="locked">
                <option value="">是否锁定</option>
                <option value="true">已锁定</option>
                <option value="false">未锁定</option>
            </select>
            <select class="form-control input-sm" s="select"
                    name="sort"
                    s-build="S.get('/api/enum/valuesMap/core.enums.UserSort')">
                <option value="">所有排序</option>
            </select>
            <input autocomplete="off" type="hidden" name="page" id="page" value="1"/>
            <input autocomplete="off" type="submit" class="btn btn-default btn-sm" value="查找"/>
            <input type="button" class="btn btn-default btn-sm pull-right" s-click="exportXsl()" value="导出"/>
        </form>
    </div>
    <table
            id="usersGrid"
            s='datac,nda'
            s-data="Smart.cleanJsonRef(S.get('/api/user/search', $form.node.serialize()))"
            class="table table-stripped table-bordered">
        <tr>
            <th>ID</th>
            <th>昵称</th>
            <th>手机号</th>
            <th>省份</th>
            <th>城市</th>
            <th>区/县</th>
            <th>关系链</th>
            <th>会员级别</th>
            <th class="text-center">锁定状态</th>
            <th>创建时间</th>
            <th>活跃时间</th>
            <th class="text-right">操作</th>
        </tr>
        <tbody s="loop" s-data-filter="'results'">
        <tr s-loop-role="empty">
            <td colspan="13" class="alert alert-warning">
                暂无数据
            </td>
        </tr>
        <tr s-loop-role="row" s="row,datac">
            <td name="id"></td>
            <td s="tpl">
                <div style="width: 200px;">
                    <img src="{%=this.avatarUrl%}" style="max-width: 50px; max-height: 50px;" class="pull-left" />
                    <div class="pull-right" style="width: 140px;">
                        <div>{%=this.nickname%}</div>
                    </div>
                </div>
            </td>
            <td name="phone"></td>
            <td name="province"></td>
            <td name="city"></td>
            <td name="district"></td>
            <td name="relationPath"></td>
            <td s="tpl">
                <span name="levelTitle">{%=this.levelTitle%}</span> <a href="javascript:;" s-click="setLevel(this)" class="fa fa-edit"></a>
            </td>
            <td s="tpl" class="text-center">
                <label class="label
                            {%
                                switch(this.locked) {
                                    case false: out.print('label-success'); break;
                                    case true: out.print('label-danger'); break;
                                    default: out.print('label-default');break;
                                }
                            %}
                        ">{%=this.locked ? '已锁定' : '正常'%}</label>
            </td>
            <td name="createTime"></td>
            <td name="lastActiveTime"></td>
            <td s="tpl" class="text-right">
                {%if(this.locked) {%}
                <input autocomplete="off" type="button" s-click="locked(this, false)" class="btn btn-xs btn-warning btn-outline" value="解锁"/>
                {%} else {%}
                <input autocomplete="off" type="button" s-click="locked(this, true)" class="btn btn-xs btn-success btn-outline" value="锁定"/>
                {%}%}
                <input autocomplete="off" type="button" s-click="remove(this)" class="btn btn-xs btn-outline btn-danger" value="删除"/>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="13" class="text-right">
                <ul s="pagination" id="sellerPagination"
                    s-pagination="{action:function(){$page.node.val(this); $usersGrid.refresh()}}"
                    class="pagination pagination-sm">
                </ul>
                共有<span name="total"></span>个数据
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript">
    function locked($s, lock) {
        var data = $s.parent().data();
        S.confirm("确认操作吗?").done(function() {
            S.put("/api/user/lock/" + data.id + '-' + lock).done(function() {
                $usersGrid.refresh()
            })
        })
    }
    function remove($s) {
        var data = $s.parent().data();
        S.confirm("确认操作吗?").done(function() {
            S.remove("/api/user/del/" + data.id ).done(function() {
                $usersGrid.refresh()
            })
        })
    }

    function setLevel($s) {
        var data = $s.parent().data();
        S.popupOpen('/user/user-level.html', {id: data.id, level: data.level}).done(function(rs) {
            rs && $usersGrid.refresh()
        })
    }

    S.on('s-ready', function(){
        S.cascade($province, $city, $district);
    })

		function exportXsl() {
			S.popupOpen('/export-num.html').done(function (maxCount) {
				if (maxCount) {
					window.open('/api/user/export?' + $form.node.serialize() + '&maxCount=' + maxCount)
				}
			})
		}

</script>